/* eslint-disable */
<template>
  <!-- 学生端布局容器：使用el-container实现整体布局 -->
  <el-container class="app-wrapper">
    <!-- 顶部导航栏：固定高度60px -->
    <el-header height="60px">
      <!-- 左侧区域：显示系统标题 -->
      <div class="header-left">
        <h2>学生作业管理系统</h2>
      </div>
      <!-- 右侧区域：显示用户信息和下拉菜单 -->
      <div class="header-right">
        <!-- 用户信息下拉菜单：使用el-dropdown组件 -->
        <el-dropdown @command="handleCommand">
          <!-- 触发下拉菜单的按钮 -->
          <span class="el-dropdown-link">
            {{ userInfo.name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <!-- 下拉菜单选项 -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主要内容区域：使用router-view显示路由组件 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'StudentLayout',
  data() {
    return {
      // 从本地存储获取用户信息，如果不存在则使用空对象
      userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
    }
  },
  methods: {
    // 处理下拉菜单命令：根据选择执行相应操作
    handleCommand(command) {
      if (command === 'profile') {
        // 跳转到个人信息页面
        this.$router.push('/student/profile')
      } else if (command === 'logout') {
        // 清除用户信息并跳转到登录页
        localStorage.removeItem('userInfo')
        localStorage.removeItem('token')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped>
/* 应用容器样式：设置100%视口高度 */
.app-wrapper {
  height: 100vh;
}

/* 头部导航栏样式：设置背景色、文字颜色和阴影效果 */
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

/* 头部左侧样式：设置标题对齐方式 */
.header-left {
  display: flex;
  align-items: center;
}

/* 系统标题样式：移除默认边距 */
.header-left h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

/* 头部右侧样式：设置用户信息对齐方式 */
.header-right {
  display: flex;
  align-items: center;
}

/* 下拉菜单链接样式：设置鼠标指针和文字颜色 */
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

/* 下拉箭头图标样式：设置图标大小 */
.el-icon-arrow-down {
  font-size: 12px;
}
</style> 